<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./code.css">

  <title>VRTWebIDE</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background-color: rgb(50, 51, 52);
      overflow: hidden;
    }

    #box {
      display: flex;
      width: 100%;
      height: 100%;
      background-color: rgb(50, 51, 52);
    }

    #box-editor {
      flex: 1;
      width: 300px;
      position: relative;
      background-color: rgb(50, 51, 52);
    }

    #box-show {
      flex: 1;
      border-left: 1px solid black;
    }

    #btnRender {
      position: relative;
      right: 0;
      bottom: 0;
    }

    #btnCommit {
      position: relative;
      bottom: 0;
    }
  </style>
</head>

<body>
  <div id="box">
    <div id="box-show"></div>
    <div id="box-editor">
      <demo ref='code'></demo>
      <button id="btnRender">Render</button>
      <button id="btnCommit">Commit</button>
    </div>
  </div>
</body>

<script src="../VRTJSFramework.js"></script>
<script src="../VRTWebBuildSDK.js"></script>


<script src="https://unpkg.com/vue"></script>
<script src="./code.umd.min.js"></script>


<script>
  var editor = new Vue({
    components: {
      demo: code
    },
    mounted() {
      this.setValue('//code your project\n')
    },
    methods: {
      setValue(value) {
        this.$refs.code.setValue(value);
      },

      getValue() {
        return this.$refs.code.getValue();
      }
    }
  }).$mount('#box-editor')


  var btnRender = document.getElementById('btnRender');
  btnRender.addEventListener('click', function () {
    web_renderScript(editor.getValue());
  })

  var btnCommit = document.getElementById('btnCommit');
  btnCommit.addEventListener('click', function () {
  })
  window.onload = function () {
    api_webOnly_registerEditor(editor);
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'https://21xa689434.imwork.net:23333/public/tmp/VRTJSFramework/code/VRTDebugger/VRTDebugger.js', false);
    xhr.send(null);

    web_renderScript(xhr.responseText);
  };

</script>